<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { formatNumber } from '@/home/utils/format';
import { useFetch } from '@/home/hooks/fetch';
import Pagination from '@/home/components/Pagination.vue';
import LoadingBox from '@/home/components/LoadingBox.vue';
import Loading from '@/home/components/Loading.vue';

const props = defineProps({
  query: {
    type: String,
    default: '',
  },
});

const PAGE_SIZE = 10;

const { $fetch } = useFetch();

const page = ref(1);
const listing = ref<Record<string, any>[]>([]);
const loading = ref(true);
const total = ref(0);

const refresh = async () => {
  loading.value = true;

  const { isSuccess, data } = await $fetch('/esInfoProduct/getPageProduct', {
    method: 'post',
    data: {
      productType: 'tag',
      keyWords: props.query,
      pageNum: page.value,
      pageSize: PAGE_SIZE,
    },
  });

  loading.value = false;

  if (isSuccess) {
    listing.value = data?.records ?? [];
    total.value = data?.total ?? 0;
  }
}

const pageChange = (index: number) => {
  page.value = index;

  refresh();
}

watch(() => props.query, () => {
  page.value = 1;
  refresh();
});

onMounted(() => {
  refresh();
});
</script>

<template>
  <div class="page-search-tag container">
    <div class="mb-8 flex-y-center justify-between">
      <div></div>
      <div class="text-12 text-[#adadad] leading-20">{{ $t('home.search.searchResult', { total }) }}</div>
    </div>

    <ul class="min-h-100 rounded-6 bg-white">
      <LoadingBox :loading="loading">
        <template v-if="listing?.length > 0">
          <li class="group" v-for="item in listing" :key="item.productId">
            <RouterLink :to="`/tag/${item.productId}`" class="block" target="_blank">
              <div class="px-24 py-16 hover:(bg-[rgba(61,124,250,0.03)]) group-first:(pt-24) group-last:(pb-24)">
                <div>
                  <h3 class="truncate-ellipsis text-16 color-[#292929] font-medium leading-24">
                    <!-- eslint-disable-next-line vue/no-v-html -->
                    <span v-html="item.title"></span>
                  </h3>
                </div>

                <div class="mt-8 flex-y-center gap-x-20 text-12 text-[#adadad] leading-20">
                  <div>{{ $t('home.search.tag.number1', { total: formatNumber(item.infoNum) }) }}</div>
                  <div>{{ $t('home.search.tag.number2', { total: formatNumber(item.repoNum) }) }}</div>
                  <div>{{ $t('home.search.tag.number3', { total: formatNumber(item.orgNum) }) }}</div>
                </div>
              </div>

              <hr class="mx-24 h-1 border-[#fafafa] border-solid group-last:(hidden)">
            </RouterLink>
          </li>
        </template>
        <template v-else-if="!loading && listing?.length === 0">
          <li class="min-h-550 flex items-center justify-center color-[#8b8b8b]">{{ $t('home.common.emptyContent') }}</li>
        </template>

        <template #loading>
          <li class="min-h-100 flex items-center justify-center">
            <Loading class="size-16 color-#8b8b8b" />
          </li>
        </template>
      </LoadingBox>
    </ul>

    <Pagination class="data-[total-pages=gt1]:(mt-32)" :count="total" :page="page" :page-size="PAGE_SIZE" @change="pageChange" />
  </div>
</template>

<style lang="scss" scoped>
</style>
